<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <title>eian-admin</title>
    <link rel="icon" href="/favicon.ico" />
  </head>

  <body>
    <div id="app">
      <style>
        html,
        body,
        #app {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        .loading-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .dots-container {
          display: flex;
          gap: 16px;
          align-items: flex-end;
          justify-content: center;
          height: 70px;
          margin-bottom: 24px;
        }

        .dot-wrapper {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .dot {
          width: 16px;
          height: 16px;
          background-color: #224cd6;
          border-radius: 50%;
          transition: transform 0.2s;
        }

        .dot-shadow {
          width: 16px;
          height: 2px;
          margin-top: 6px;
          background-color: rgb(107 138 236 / 15%);
          border-radius: 50%;
          filter: blur(1px);
          transform-origin: center top;
        }

        .dot-1 {
          animation: bounce1 1.3s infinite;
        }

        .dot-2 {
          animation: bounce2 1.3s infinite 0.15s;
        }

        .dot-3 {
          animation: bounce3 1.3s infinite 0.3s;
        }

        .shadow-1,
        .shadow-2,
        .shadow-3 {
          animation: shadow 1.3s infinite;
        }

        .shadow-2 {
          animation-delay: 0.15s;
        }

        .shadow-3 {
          animation-delay: 0.3s;
        }

        @keyframes bounce1 {
          0%,
          100% {
            transform: translateY(0);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          }

          50% {
            transform: translateY(-26px);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          }
        }

        @keyframes bounce2 {
          0%,
          100% {
            transform: translateY(0);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          }

          50% {
            transform: translateY(-32px);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          }
        }

        @keyframes bounce3 {
          0%,
          100% {
            transform: translateY(0);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          }

          50% {
            transform: translateY(-24px);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          }
        }

        @keyframes shadow {
          0%,
          100% {
            opacity: 0.15;
            transform: scaleX(0.75);
          }

          50% {
            opacity: 0.08;
            transform: scaleX(0.45);
          }
        }

        @keyframes fade-in {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }
      </style>
      <div class="loading-container">
        <div class="dots-container">
          <div class="dot-wrapper">
            <div class="dot dot-1"></div>
            <div class="dot-shadow shadow-1"></div>
          </div>
          <div class="dot-wrapper">
            <div class="dot dot-2"></div>
            <div class="dot-shadow shadow-2"></div>
          </div>
          <div class="dot-wrapper">
            <div class="dot dot-3"></div>
            <div class="dot-shadow shadow-3"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
